*, *::before, *::after { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; font-size: 1rem; font-family: 'Roboto', sans-serif; font-weight: 400; color: #171717; }
img { display: block; max-width: 100%; }

a {
	color: #269fe8;
}

body {
    display: grid;
    grid-template-rows: 3.7rem auto 1fr 3.7rem;
    grid-template-areas: "header" "banner" "main" "footer";
}

header {
    grid-area: header;
    position: sticky;
    z-index: 10;
    top: 0;
    width: 100%;
    background:white;
    border-bottom: .4mm solid #e5e5e5;
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
}
header .action {
    max-width: 2.5rem;
}

.banner {
    grid-area: banner;
    position: relative;
    background:#f7f7f7;
}

main {
    grid-area: main;
    position: relative;
    background:#eee;
    padding: 2rem 0 1rem 0;
    display: grid;
    grid-template-areas: ". center .";
    grid-template-columns: auto minmax(min-content, 48rem) auto;
    grid-row-gap: 2rem;
    align-content: start;
}

footer {
    grid-area: footer;
}

/* Notifications */

.info-box {
    position: fixed; right: 10px; top:37px; z-index: 1000;
}
.info-success {
    padding: 15px; background: rgba(194,255,151,0.77); font-size: 14px; color:#222222; margin-bottom: 10px;
    border-radius: 10px 0px 10px 10px; border: 0;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.info-error {
    padding: 15px; background: rgba(148,0,2,0.77); font-size: 14px; color:#ffffff; margin-bottom: 10px;
    border-radius: 10px 0px 10px 10px; border: 0;
    box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.info-success a {
    color:#ffffff;
}
.info-error a {
    color:#ffffff;
}

.hide-upload-btn { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }

.header-with-buttons {
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	align-content: center;
	grid-column-gap: 0.5rem;
}
